<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between;">
                <div>
                    <el-input :disabled="showAdvance" size="small" @clear="initEmps" clearable style="width: 260px;margin-right: 8px"
                              v-model="keyword" placeholder="请输入员工名进行搜索" @keydown.enter.native="doSearch"
                              prefix-icon="el-icon-search"></el-input>
                    <el-button :disabled="showAdvance" size="small" type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
                    <el-button @click="showAdvance=!showAdvance" size="small" type="primary"><i aria-hidden="true" :class="showAdvance?'fa fa-angle-double-up':'fa fa-angle-double-down'"></i>&nbsp;高级搜索
                    </el-button>
                </div>
                <div>
                <el-upload
                        style="display: inline-flex;margin-right: 10px"
                        class="upload-demo"
                        :before-upload="beforeUpload"
                        :on-success="onSuccess"
                        :on-error="onError"
                        :show-file-list="false"
                        :disabled="importDataDisabled"
                        action="/employee/basic/import">
                    <el-button :disabled="importDataDisabled" size="small" type="success" :icon="importDataBtnIcon"><!--<i aria-hidden="true" class="fa fa-level-down"></i>-->&nbsp;&nbsp;{{importDataBtnText}}
                    </el-button>
                </el-upload>
                <el-button @click="exportData" size="small" type="success" icon="el-icon-download"><!--<i aria-hidden="true" class="fa fa-level-up"></i>-->&nbsp;&nbsp;导出数据
                </el-button>
                <el-button size="small" type="primary" @click="showAddEmpView">添加用户</el-button>
            </div>
            </div>
            <transition name="slide-fade">
            <div v-show="showAdvance" style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px 10px;margin: 10px 0px;">
                <el-row>
                    <el-col :span="5">
                        政治面貌：
                        <el-select style="width: 130px" size="small" v-model="searchValue.politicid" placeholder="政治面貌">
                            <el-option
                                    v-for="item in politicsstatus"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        名族：
                        <el-select style="width: 100px" size="small" v-model="searchValue.nationid" placeholder="名族">
                            <el-option
                                    v-for="item in nations"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职位：
                        <el-select style="width: 130px" size="small" v-model="searchValue.posid" placeholder="职位">
                            <el-option
                                    v-for="item in positions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        职称：
                        <el-select style="width: 130px" size="small" v-model="searchValue.joblevelid" placeholder="职称">
                            <el-option
                                    v-for="item in joblevels"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7">
                        聘用形式：
                        <el-radio-group v-model="searchValue.engageform">
                            <el-radio label="劳动合同" style="margin-right: 10px;">劳动合同</el-radio>
                            <el-radio label="劳务合同">劳务合同</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="5">
                        所属部门：
                        <el-popover
                                placement="right"
                                title="请选择部门"
                                width="200"
                                trigger="manual"
                                v-model="popVisible">
                            <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                     @node-click="searchViewHandleNodeClick"></el-tree>
                            <div slot="reference" style="cursor:pointer;margin-top:3px;height:28px;width: 130px;display:inline-block;
                                font-size: 13px;border: 1px solid #dedede;border-radius: 5px;text-align: initial;" @click="showDepView"><span style="margin-left: 12px;padding-bottom: 10px">{{inputDepName}}</span>
                            </div>
                        </el-popover>
                    </el-col>
                    <el-col :span="10">
                        入职日期：
                        <el-date-picker
                                size="small"
                                v-model="searchValue.bDateScope"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="5" :offset="4">
                        <el-button round size="small">取消</el-button>
                        <el-button @click="initEmps('advance')" size="small" type="primary" icon="el-icon-search">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
            </transition>
        </div>
        <div style="margin-top: 8px" id="table">
            <el-table
                    v-loading="loading"
                    element-loading-text="正在加载"
                    size="small"
                    :data="emps"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="name"
                        fixed
                        align="left"
                        label="姓名"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="workid"
                        label="工号"
                        align="left"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="birthday"
                        width="90"
                        label="出生日期">
                </el-table-column>
                <el-table-column
                        prop="idcard"
                        width="150"
                        label="身份证号">
                </el-table-column>
                <el-table-column
                        prop="wedlock"
                        width="70"
                        label="婚姻状况">
                </el-table-column>
                <el-table-column
                        prop="nation.name"
                        width="50"
                        label="民族">
                </el-table-column>
                <el-table-column
                        prop="nativeplace"
                        width="50"
                        label="籍贯">
                </el-table-column>
                <el-table-column
                        prop="politicsstatus.name"
                        label="政治面貌">
                </el-table-column>
                <el-table-column
                        width="150"
                        prop="email"
                        label="电子邮件">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="phone"
                        label="电话号码">
                </el-table-column>
                <el-table-column
                        width="175"
                        prop="address"
                        label="联系地址">
                </el-table-column>
                <el-table-column
                        prop="department.name"
                        label="所属部门">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="position.name"
                        label="职位">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="jObLevel.name"
                        label="职称">
                </el-table-column>
                <el-table-column
                        prop="engageform"
                        label="聘用形式">
                </el-table-column>
                <el-table-column
                        width="90"
                        prop="begindate"
                        label="入职日期">
                </el-table-column>
                <el-table-column
                        width="90"
                        prop="conversiontime"
                        label="转正日期">
                </el-table-column>
                <el-table-column
                        width="95"
                        prop="begincontract"
                        label="合同起始日期">
                </el-table-column>
                <el-table-column
                        width="95"
                        prop="endcontract"
                        label="合同截至日期">
                </el-table-column>
                <el-table-column
                        label="合同期限">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.contractterm}}年</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="tiptopdegree"
                        label="最高学历">
                </el-table-column>
                <el-table-column
                        prop="specialty"
                        width="120px"
                        label="专业">
                </el-table-column>
                <el-table-column
                        prop="school"
                        label="毕业院校">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        width="200px"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showEditEmpView(scope.row)" style="padding: 3px" size="mini">编辑</el-button>
                        <el-button style="padding: 3px" size="mini" type="primary">查看高级资料</el-button>
                        <el-button @click="deleteEmp(scope.row)" style="padding: 3px" size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="display: flex;justify-content: flex-end;"
                    background
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    layout="sizes, prev, pager, next, jumper, ->, total, slot"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="80%">
            <div>
                <el-form :model="emp" :rules="rules" ref="empForm">
                    <el-row id="1">
                        <el-col :span="6">
                            <el-form-item label="姓名：" prop="name">
                                <el-input style="width: 150px" size="small" prefix-icon="el-icon-edit"
                                          v-model="emp.name" placeholder="请输入员工姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="姓别：" prop="gender">
                                <el-radio-group v-model="emp.gender">
                                    <el-radio label="男" style="margin-right: 10px;">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="出生日期：" prop="birthday">
                                <el-date-picker
                                        style="width: 150px"
                                        size="small"
                                        v-model="emp.birthday"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="政治面貌：" prop="politicid">
                                <el-select style="width: 150px" size="small" v-model="emp.politicid" placeholder="政治面貌">
                                    <el-option
                                            v-for="item in politicsstatus"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row id="2">
                        <el-col :span="6">
                            <el-form-item label="名族：" prop="nationid">
                                <el-select style="width: 150px" size="small" v-model="emp.nationid" placeholder="名族">
                                    <el-option
                                            v-for="item in nations"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="籍贯：" prop="nativeplace">
                                <el-input size="small" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="emp.nativeplace" placeholder="籍贯"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="电子邮箱：" prop="email">
                                <el-input size="small" style="width: 150px" prefix-icon="el-icon-message"
                                          v-model="emp.email" placeholder="电子邮箱"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="联系地址：" prop="address">
                                <el-input size="small" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="emp.address" placeholder="联系地址"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row id="3">
                        <el-col :span="6">
                            <el-form-item label="职位：" prop="posid">
                                <el-select style="width: 150px" size="small" v-model="emp.posid" placeholder="职位">
                                    <el-option
                                            v-for="item in positions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="职称：" prop="joblevelid">
                                <el-select style="width: 150px" size="small" v-model="emp.joblevelid" placeholder="职称">
                                    <el-option
                                            v-for="item in joblevels"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="所属部门：" prop="departmentid">
                                <el-popover
                                        placement="right"
                                        title="请选择部门"
                                        width="200"
                                        trigger="manual"
                                        v-model="popVisible">
                                    <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                             @node-click="handleNodeClick"></el-tree>
                                    <div slot="reference" style="cursor:pointer;margin-top:3px;height:28px;width: 150px;display:inline-block;
                                font-size: 13px;border: 1px solid #dedede;border-radius: 5px;text-align: initial;" @click="showDepView"><span style="margin-left: 12px;padding-bottom: 10px">{{inputDepName}}</span>
                                    </div>
<!--                                    <el-input size="small" style="width: 150px" slot="reference" @click="showDepView"></el-input>-->
                                </el-popover>

                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="电话号码：" prop="phone">
                                <el-input size="small" style="width: 150px" prefix-icon="el-icon-phone"
                                          v-model="emp.phone" placeholder="电话号码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row id="4">
                        <el-col :span="6">
                            <el-form-item label="工号：" prop="workid">
                                <el-input disabled size="small" style="width: 150px" v-model="emp.workid"
                                          placeholder="工号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="学历：" prop="tiptopdegree">
                                <el-select style="width: 150px" size="small" v-model="emp.tiptopdegree"
                                           placeholder="学历">
                                    <el-option
                                            v-for="item in tiptopdegrees"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="毕业院校：" prop="school">
                                <el-input size="small" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="emp.school" placeholder="毕业院校"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="专业名称：" prop="specialty">
                                <el-input size="small" style="width: 150px" prefix-icon="el-icon-edit"
                                          v-model="emp.specialty" placeholder="专业名称"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row id="5">
                        <el-col :span="6">
                            <el-form-item label="入职日期：" prop="begindate">
                                <el-date-picker
                                        style="width: 130px"
                                        size="small"
                                        v-model="emp.begindate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="入职日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="转正日期：" prop="conversiontime">
                                <el-date-picker
                                        style="width: 130px"
                                        size="small"
                                        v-model="emp.conversiontime"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="转正日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同起始日期：" prop="begincontract">
                                <el-date-picker
                                        style="width: 130px"
                                        size="small"
                                        v-model="emp.begincontract"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="合同起始日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同终止日期：" prop="endcontract">
                                <el-date-picker
                                        style="width: 130px"
                                        size="small"
                                        v-model="emp.endcontract"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="合同终止日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row id="6">
                        <el-col :span="8">
                            <el-form-item label="身份证号码：" prop="idcard">
                                <el-input size="small" style="width: 180px" prefix-icon="el-icon-edit"
                                          v-model="emp.idcard" placeholder="身份证号码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="聘用形式：" prop="engageform">
                                <el-radio-group v-model="emp.engageform">
                                    <el-radio label="劳动合同" style="margin-right: 10px;">劳动合同</el-radio>
                                    <el-radio label="劳务合同">劳务合同</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="婚姻状况：" prop="wedlock">
                                <el-radio-group v-model="emp.wedlock">
                                    <el-radio label="已婚" style="margin-right: 10px;">已婚</el-radio>
                                    <el-radio label="未婚" style="margin-right: 10px;">未婚</el-radio>
                                    <el-radio label="离异">离异</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAddEmp">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

    import {Message} from "element-ui";

    export default {
        name: "EmpBasic",
        data() {
            return {
                searchValue:{
                    politicid:null,
                    nationid:null,
                    joblevelid:null,
                    posid:null,
                    engageform:null,
                    departmentid:null,
                    bDateScope:null
                },
                title:'添加员工',
                dialogVisible: false,
                importDataBtnText:'导入数据',
                importDataBtnIcon:'el-icon-upload2',
                importDataDisabled:false,
                showAdvance:false,
                emps: [],
                loading: false,
                total: 0,
                page: 1,
                size: 10,
                keyword: '',
                nations: [],
                joblevels: [],
                politicsstatus: [],
                positions: [],
                popVisible: false,
                allDeps: [],
                inputDepName:'所属部门',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                tiptopdegrees: ['本科', '大专', '硕士', '博士', '高中', '初中', '小学', '其他'],
                emp: {
                    name: "一鑫哥",
                    gender: "男",
                    birthday: "1995-01-01",
                    idcard: "610122199001011256",
                    wedlock: "已婚",
                    nationid: 1,
                    nativeplace: "陕西",
                    politicid: 13,
                    email: "laowang@qq.com",
                    phone: "18565558897",
                    address: "深圳市南山区",
                    departmentid: null,
                    joblevelid: 9,
                    posid: 29,
                    engageform: "劳务合同",
                    tiptopdegree: "本科",
                    specialty: "信息管理与信息系统",
                    school: "深圳大学",
                    begindate: "2018-01-01",
                    workstate: "在职",
                    workid: "00000066",
                    contractterm: 2.0,
                    conversiontime: "2018-04-01",
                    notworkdate: null,
                    begincontract: "2018-01-01",
                    endcontract: "2020-01-01",
                    workage: null
                },
                rules: {
                    name:[{required:true,message:'请输入姓名',trigger:'blur'}],
                    gender:[{required:true,message:'请输入姓别',trigger:'blur'}],
                    birthday:[{required:true,message:'请输入生日',trigger:'blur'}],
                    idcard:[{required:true,message:'请输入身份证号码',trigger:'blur'},{pattern:/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,message:'身份证号码格式不正确！',trigger:'blur'}],
                    wedlock:[{required:true,message:'请输入婚姻状况',trigger:'blur'}],
                    nationid:[{required:true,message:'请输入民族',trigger:'blur'}],
                    nativeplace:[{required:true,message:'请输入籍贯',trigger:'blur'}],
                    politicid:[{required:true,message:'请输入政治面貌',trigger:'blur'}],
                    email:[{required:true,message:'请输入邮箱地址',trigger:'blur'},{type:'email',message:'邮箱格式不正确！',trigger:'blur'}],
                    phone:[{required:true,message:'请输入电话号码',trigger:'blur'}],
                    address:[{required:true,message:'请输入地址',trigger:'blur'}],
                    departmentid:[{required:true,message:'请输入部门',trigger:'blur'}],
                    joblevelid:[{required:true,message:'请输入职称',trigger:'blur'}],
                    posid:[{required:true,message:'请输入职位',trigger:'blur'}],
                    engageform:[{required:true,message:'请输入聘用形式',trigger:'blur'}],
                    tiptopdegree:[{required:true,message:'请输入学历',trigger:'blur'}],
                    specialty:[{required:true,message:'请输入专业',trigger:'blur'}],
                    school:[{required:true,message:'请输入毕业院校',trigger:'blur'}],
                    begindate:[{required:true,message:'请输入职日期',trigger:'blur'}],
                    workstate:[{required:true,message:'请输入工作状态',trigger:'blur'}],
                    workid:[{required:true,message:'请输入职工号',trigger:'blur'}],
                    contractterm:[{required:true,message:'请输入合同期限',trigger:'blur'}],
                    conversiontime:[{required:true,message:'请输入转正日期',trigger:'blur'}],
                    notworkdate:[{required:true,message:'请输入离职日期',trigger:'blur'}],
                    begincontract:[{required:true,message:'请输入合同起始日期',trigger:'blur'}],
                    endcontract:[{required:true,message:'请输入合同结束日期',trigger:'blur'}],
                    workage:[{required:true,message:'请输入工龄',trigger:'blur'}]
                }
            }
        },
        mounted() {
            this.initEmps();
            this.initData();
            this.initPositions();
        },
        methods: {
            searchViewHandleNodeClick(data){
                this.inputDepName = data.name;
                this.searchValue.departmentid = data.id;
                this.popVisible=!this.popVisible;
            },
            onError(){
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                Message.error("导入失败")
                this.importDataDisabled = false;
            },
            onSuccess(){
                this.importDataBtnText = '导入数据';
                this.importDataBtnIcon = 'el-icon-upload2';
                this.importDataDisabled = false;
                this.initEmps();
                Message.success("导入成功")
            },
            beforeUpload(){
                this.importDataBtnText = '正在导入';
                this.importDataBtnIcon = 'el-icon-loading';
                this.importDataDisabled = true;
            },
            exportData(){
              window.open('/employee/basic/export','_parent')
            },
            emptyEmp(){
                this.emp = {
                    name: "",
                    gender: "",
                    birthday: "",
                    idcard: "",
                    wedlock: "",
                    nationid: 1,
                    nativeplace: "",
                    politicid: 13,
                    email: "",
                    phone: "",
                    address: "",
                    departmentid: null,
                    joblevelid: 9,
                    posid: 29,
                    engageform: "",
                    tiptopdegree: "",
                    specialty: "",
                    school: "",
                    begindate: "",
                    workid: "",
                    contractterm: 2.0,
                    conversiontime: "",
                    notworkdate: null,
                    begincontract: "",
                    endcontract: "",
                    workage: null
                };
                this.inputDepName = "";
            },
            showEditEmpView(data){
                this.title = "编辑员工";
                this.emp = data;
                this.dialogVisible = true;
                this.inputDepName = data.department.name;
                this.initPositions();
            },
            deleteEmp(data){
                this.$confirm('此操作将永久删除【'+data.name+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/employee/basic/"+data.id).then(resp=>{
                        if (resp){
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            doAddEmp(){
                this.$refs.empForm.validate((valid)=>{
                   if (valid){
                       if (this.emp.id){
                           this.putRequest("/employee/basic/",this.emp).then(resp=>{
                               if (resp){
                                   this.initEmps();
                               }
                           });
                       } else {
                           this.postRequest("/employee/basic/",this.emp).then(resp=>{
                               if (resp){
                                   this.initEmps();
                               }
                           });
                       }
                       this.dialogVisible = false;
                   }
                });
            },
            handleNodeClick(data) {
                this.inputDepName = data.name;
                this.emp.departmentid = data.id;
                this.popVisible = !this.popVisible
            },
            showDepView() {
                this.popVisible = !this.popVisible
            },
            getMaxWorkId() {
                this.getRequest("/employee/basic/maxWorkId").then(resp => {
                    if (resp) {
                        this.emp.workid = resp.obj;
                    }
                })
            },
            initPositions() {
                let position = window.sessionStorage.getItem("position");
                if (!position) {
                    this.getRequest("/employee/basic/position").then(resp => {
                        this.positions = resp;

                    })
                }
            },
            initData() {
                let nations = window.sessionStorage.getItem("nations");
                if (!nations) {
                    this.getRequest("/employee/basic/nation").then(resp => {
                        this.nations = resp;
                        window.sessionStorage.setItem("nations", JSON.stringify(resp))
                    })
                } else {
                    this.nations = JSON.parse(nations);
                }
                let politicsstatus = window.sessionStorage.getItem("politicsstatus");
                if (!politicsstatus) {
                    this.getRequest("/employee/basic/politicsstatus").then(resp => {
                        this.politicsstatus = resp;
                        window.sessionStorage.setItem("politicsstatus", JSON.stringify(resp))
                    })
                } else {
                    this.politicsstatus = JSON.parse(politicsstatus);
                }
                let jobLevel = window.sessionStorage.getItem("jobLevel");
                if (!jobLevel) {
                    this.getRequest("/employee/basic/jObLevel").then(resp => {
                        this.joblevels = resp;
                        window.sessionStorage.setItem("jobLevel", JSON.stringify(resp))
                    })
                } else {
                    this.joblevels = JSON.parse(jobLevel);
                }
                let deps = window.sessionStorage.getItem("deps");
                if (!deps) {
                    this.getRequest("/employee/basic/deps").then(resp => {
                        this.allDeps = resp;
                        window.sessionStorage.setItem("deps", JSON.stringify(resp))
                    })
                } else {
                    this.allDeps = JSON.parse(deps);
                }
            },
            showAddEmpView() {
                this.initPositions();
                this.getMaxWorkId();
                this.title = "添加员工";
                this.dialogVisible = true;
                this.emptyEmp();
            },
            sizeChange(currentSize) {
                this.size = currentSize;
                this.initEmps();
            },
            currentChange(currentPage) {
                this.page = currentPage;
                this.initEmps();
            },
            doSearch() {
                this.initEmps();
            },
            initEmps(type) {
                let url='/employee/basic/?page='+ this.page + "&size=" + this.size;
                if (type && type=='advance'){
                    if (this.searchValue.politicid){
                        url+="&politicid="+this.searchValue.politicid;
                    }
                    if (this.searchValue.nationid){
                        url+="&nationid="+this.searchValue.nationid;
                    }
                    if (this.searchValue.nationid){
                        url+="&nationid="+this.searchValue.nationid;
                    }
                    if (this.searchValue.joblevelid){
                        url+="&joblevelid="+this.searchValue.joblevelid;
                    }
                    if (this.searchValue.posid){
                        url+="&posid="+this.searchValue.posid;
                    }
                    if (this.searchValue.engageform){
                        url+="&engageform="+this.searchValue.engageform;
                    }
                    if (this.searchValue.departmentid){
                        url+="&departmentid="+this.searchValue.departmentid;
                    }
                    if (this.searchValue.bDateScope){
                        url+="&bDateScope="+this.searchValue.bDateScope;
                    }
                } else {
                    url = url+"&name=" + this.keyword;
                }
                this.loading = true;
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.emps = resp.data;
                        this.total = resp.total;
                    }
                })
            }
        }
    }
</script>
<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .8s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>